<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BoundaryOverlay</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        #app {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            background-color: #fff;
            z-index: 99999;
            padding: 5px 20px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U3q69k0Dv0GCYNiiZeHPf7BS"></script>
    <script src="./data/shenzhen.js"></script>
    <script src="../dist/inmap.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>

<body>
    <div id="app">
        请选择板块：
        <i-select v-model="model" style="width:200px">
            <i-option v-for="item in boundarys" :value="item.value" :key="item.value">{{ item.label }}</i-option>
        </i-select>
    </div>
    <div id="allmap"></div>
</body>
<script>
    var inMapVue = new Vue({
        el: '#app',
        data: {
            boundarys: [],
            model: ''
        },
        watch: {
            model: function (newVal, oldVal) {
                console.log(newVal);
                overlay.setSelectd("name=='" + newVal + "'", true);
            }
        },
        mounted: function () {
            data.forEach(function (element) {
                this.boundarys.push({
                    value: element.name,
                    label: element.name
                })
            }, this);
        }
    })
    var inmap = new inMap.Map({
        id: 'allmap',
        skin: "Blueness",
        center: ["114.16248337214269", "22.559515429553684"],
        zoom: {
            value: 11,
            show: true,
            max: 22
        }
    })
    var overlay = new inMap.BoundaryOverlay({
        tooltip: {
            show: true,
            // formatter: "{name}~{count}",
            formatter: function (params) {
                return params.count;
            }
        },
        legend: {
            show: true,
            // title: "板块去重设备数 "
        },

        style: {
            normal: {
                backgroundColor: 'rgba(0, 0, 0, 1)',
                borderWidth: 3,
                label: {
                    show: true, // 是否显示
                    font: "11px", // 设置字号
                    minZoom: 7, // 最小显示的级别
                    color: 'rgba(0, 0, 0, 1)'
                }
            },
            mouseOver: {
                backgroundColor: 'rgba(200, 200, 200, 1)',
                borderColor: "rgba(10,225,70,1)",
                label: {
                    color: 'rgba(255,0,0,1)'
                }

            },
            selected: {
                backgroundColor: 'rgba(184,0,0,1)',
                borderColor: "rgba(255,255,255,1)",
                label: {
                    color: 'rgba(255,255,255,1)'
                }
            },
            splitList: [{ //设置区间颜色
                    start: 0,
                    end: 1,
                    backgroundColor: 'rgba(0,133,235,0.40)',
                    borderColor: "rgba(0,133,235,1)",

                },
                {
                    start: 1,
                    end: 2,
                    backgroundColor: 'rgba(0,184,255,0.40)',
                    borderColor: 'rgba(0,184,255,1)'
                },
                {
                    start: 2,
                    end: 3,
                    backgroundColor: 'rgba(72,246,217,0.40)',
                    borderColor: "rgba(72,246,217,1)"
                },
                {
                    start: 3,
                    backgroundColor: 'rgba(252,196,95,0.40)',
                    borderColor: 'rgba(252,196,95,1)'
                }
            ],
        },
        data: [],
        event: {
            onMouseClick: function (item) {
                console.log(item);
                //能获取当前点的信息
            }
        }
    });
    inmap.add(overlay);
    overlay.setPoints(data);
</script>

</html>